<!--
 * @Author: GKN
 * @Date: 2023-09-01 10:42:12
 * @LastEditTime: 2024-01-22 16:26:50
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\home\village.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="widthFull" style="height: 498px;">
        <img class="ad-img cursor-p" src="~@/assets/img/xc.png" alt="" @click="goNotes">
    </div>
    <div class="header widthFull flex flex-j-c">
        <div class="flex a-tab1 widthFull flex-j-c flex-align ">
            <div v-for="(item,i) in head_tabs" :key="i" :class="i==head_tab_index?'a-tab-p-active a-tab-p':'a-tab-p'" @click="headtabclick(item,i)">{{ item.name }}</div>
        </div>
    </div>
    <div class="main mainPadding p-t p-b" style="background: #fff;">
        <div class="max-w">
        <div style="height: 226px;margin-bottom: 20px;" v-for="(item,i) in list" :key="i" @click="goInfo(item)">
            <el-row :gutter="20" style="height: 100%;">
                <el-col :span="8" style="height: 100%;">
                    <div class="ad-view" style="height: 100%;background: #ececec;">
                        <imgView :src="item.thumb" />
                    </div>
                </el-col>
                <el-col :span="16" style="height: 100%;padding: 10px 0;">
                    <div class="title-16-left" style="margin-bottom: 10px;">{{ item.name }}</div>
                    <div class="f-desc-14">{{ item.name }}</div>
                </el-col>
            </el-row>
        </div>
        </div>
    </div>
  </template>
  
<script setup>
import listView from '../components/list.vue';
import { ref,reactive, onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import CryptoJS from 'crypto-js';
import { useRoute, useRouter } from "vue-router";
const Router = useRouter();
    // 导航参数
     // 导航参数
     const id = proxy.$comJs.decrypt(Router.currentRoute.value.query.ob)
    // 获取专题id
    // 获取专题id
    const info=ref(null)
    const getInfo=()=>{
        proxy.$http.request(proxy.$api.specialInfo+id,'get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.code == 0){
                    info.value = res.data.data
                }
            }
        })
    }
    getInfo()
    // const query = proxy.$comJs.decrypt(Router.currentRoute.value.query.ob,'query')
    const head_tab_index = ref(0)
    const head_tabs = ref([
        {name:'要闻',id:2},
        {name:'专题',id:1},
        {name:'动态',id:3},
    ])
    const list = ref(null)
    const getList =(id)=>{
        proxy.$http.request(proxy.$api.topicChild+'?nextTag=0&cid='+id+'&pageSize=4&prevTag=0','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    list.value = res.data.data.list
                } 
            }
        })
    }
    getList(head_tabs.value[0].id)
    const headtabclick = (item,i) =>{
        head_tab_index.value = i
        getList(item.id)
    }
    const goInfo=(item,name)=>{
        Router.push({
            name:'specialInfo',
            query:{
                ob:proxy.$comJs.encry({
                    title:item.name,
                    id:item.pid,
                    path:'/animatedly/list',
                    first_title:'首页',
                    first_path:-1
                })
            }
        });
    }
    // 乡村优秀案例征集通知
    const goNotes=()=>{
        Router.push({
            name:'villageNotes',
            query:{
                ob:proxy.$comJs.encry({
                    info:info.value
                })
            }
        });
    }
</script>
  
<style lang='less' scoped>
.header{
    background: #d10b00;
    height: 80px;
}
.title{
    font-size: 30px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #D10B00;
    line-height: 50px;
}
</style>
  